Question

对不起，我现在不怎么清楚地问问题，我们有如下数组的元素：

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

用户输入的文字为“我有64美元，我的兄弟有60亿美元，就是700万”

在HTML页面中，它需要显示TEXTAREA值以及突出显示的匹配数组元素。我已经尝试了许多类似RegEx，String方法的方法。

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

Answer 1

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

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>

Answer 2

这是一个带有正则表达式的例子

$(function(){
  $('.example').highlightWithinTextarea({
    highlight: /64 dollars?|\$6k billion?|7 million/gi,
    className: 'highlight'
  });
});

.example{
  width:500px;
  height:250px;
}

.highlight{
  background-color:tomato;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://lonekorean.github.io/highlight-within-textarea/jquery.highlight-within-textarea.js"></script>
<link rel="stylesheet" href="http://lonekorean.github.io/highlight-within-textarea/jquery.highlight-within-textarea.css">

<textarea class="example">I have 64 dollars and my brother has $6k billion is 7 million</textarea>

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

2 个答案: