时间戳

首页 > 解决方案 > Javascript-我如何突出显示与 HTML 中的表单用户输入文本区域匹配的元素数组

javascript - Javascript-我如何突出显示与 HTML 中的表单用户输入文本区域匹配的元素数组

问题描述

抱歉，我现在不知道如何清楚地提出问题，我们有如下元素数组：

[' 64 dollars ', ' $6k billion ', ' 7 million']

用户输入类似“我有 64 美元，我兄弟有 600 亿美元是 700 万美元”的文本

在 HTML 页面中，它需要显示 TEXTAREA 值以及突出显示的匹配数组元素。我尝试过很多像 RegEx、String 方法。

请建议我执行此操作的代码。

标签： javascriptjqueryhtmlarrayshighlight

解决方案

假设您的意思along with highlighted matched array是文本在 textarea 内部突出显示，那么此代码将起作用。

var arr = [' 64 dollars ', ' \\$6k billion ', ' 7 million']; // notice the double escape
var str = $("#x").val();
var re = new RegExp(arr.join("|"), "g"); // create a a | b | c regex
// console.log(re, str.match(re));
str.match(re).forEach(function(match, i) { // loop over the matches
  str = str.replace(match, function replace(match) { // wrap the found strings
    return '<em>' + match + '</em>';
  });
});
$("#output").html(str);
em { background-color:yellow }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<textarea id="x">I have 64 dollars and my brother has $6k billion is 7 million</textarea>
<div id="output"></div>

推荐阅读