Question

我使用以下代码，当用户在大写和小写中键入一些值时，我将该值标记为粗体，以下代码正在运行。

var typedVal = oAcF._sTypedChars.toLowerCase();
element.innerHTML = element.innerHTML.replace(typedVal, "<b>" + typedVal + "</b>");

这里我得到了值，并把它放到小写，因为我想处理大写用户类型时的情况

var typedVal = oAcF._sTypedChars.toLowerCase();

这里我取值可以是例如aa并在内部html中找到它并加粗。

element.innerHTML = element.innerHTML.replace(typedVal, "<b>" + typedVal + "</b>")

问题在于，如果我在innerHTML中，例如AA它不起作用，因为值是大写的，我怎么能克服它？

我不能使用以下内容，因为我想保留原始案例的值，所以在这个示例大写中...

element.innerHTML = element.innerHTML.toLowerCase().replace(typedVal, "<b>" + typedVal + "</b>")

Answer 1

我发现要完全理解你的问题有点困难。我想你想要这个：

 var typedVal = oAcF._sTypedChars.toLowerCase();
 var re = new RegExp("("+typedVal.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')+")", "ig");  
 element.innerHTML = element.innerHTML.replace(re, "<b>$1</b>");

在搜索字符串时使用i或忽略大小写，因此aaa也会找到aAa，同时保持大写。

g将全局执行此操作，或者只是对它可以找到的每个实例说明。

当您使用替换中的变量作为搜索字符串时，您无法应用ignore case和global标记，因此您需要使用RegExp构造函数。

.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')用于转义否则会破坏正则表达式的字符。

受到其他帖子和您自己的评论的启发，我也意识到您需要使用捕获组$#。当您在正则表达式部分周围使用括号时，会创建这些。我们只有一个捕获组，因此可以使用$1识别它。

在实践中：

＆＃13;

function changeInput(element)
{
     var typedVal = document.querySelector("input").value.toLowerCase();
     var re = new RegExp("("+typedVal.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')+")", "ig");  
     element.innerHTML = element.innerHTML.replace(re, "<b>$1</b>");
}

document.querySelector("button").addEventListener("click", changeInput.bind(window, document.querySelector("div")), false);

＆＃13;

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim risus quis lorem scelerisque, in varius felis consectetur. Quisque dignissim leo eros, nec accumsan velit sodales id. Nullam laoreet lectus sit amet felis dignissim, eu fermentum tortor gravida. Praesent aliquet auctor purus, a bibendum nisl convallis et. Mauris fermentum purus mauris, vitae porttitor dolor scelerisque at. Aenean arcu leo, semper eu elementum sed, rutrum a eros. Vivamus a ante urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent lorem sapien, pretium et elementum vitae, maximus finibus ligula. Morbi imperdiet venenatis nisi eget eleifend. In ornare odio ante, ac congue velit blandit non. Sed pulvinar lorem ac ex tristique cursus at ut eros. Sed rutrum tristique turpis, in facilisis dui gravida lobortis. </div>

<input placeholder="type some input here" />
<button>Click to highlight the input</button>

＆＃13;

Answer 2

最简单的方法是使用捕获组，在这种情况下要求您使用new RegExp()构造函数：

var reg = new RegExp('(' + typedval + ')', 'i');

并且，在替换调用中，使用对该捕获组的引用（在这种情况下为$1，第一组，或$&，整个组）：

replace(reg, "<b>$1</b>");

或：

replace(reg, "<b>$&</b>");

使用$1方法进行的简单演示（尽管从您自己的代码中抽象出来）：

＆＃13;

var typedval = "AAA",
  // constructing a regular expression, via the RegExp constructor,
  // effectively concatenating strings to give (in this instance):
  // new RegExp('(AAA)', 'ig')
  // the '(AAA)' is the match we're looking for,
  // the 'ig' are the flags (i: case-insensitive, g: global):
  reg = new RegExp('(' + typedval + ')', 'ig'),
  // finding all the <li> elements on the page:
  lis = document.querySelectorAll('li');

// using Array methods to iterate over the <li> elements:
Array.prototype.forEach.call(lis, function(li) {
  // updating the innerHTML, using the created regular expression
  // with the String.prototype.replace() method:
  li.innerHTML = li.innerHTML.replace(reg, "<b>$1</b>");
});

＆＃13;

<ul>
  <li>aaa</li>
  <li>AaA</li>
  <li>aAA</li>
  <li>AAa</li>
</ul>

＆＃13;

使用$&方法：

＆＃13;

var typedval = "AAA",
  reg = new RegExp('(' + typedval + ')', 'ig'),
  lis = document.querySelectorAll('li');

Array.prototype.forEach.call(lis, function(li) {
  li.innerHTML = li.innerHTML.replace(reg, "<b>$&</b>");
});

＆＃13;

<ul>
  <li>aaa</li>
  <li>AaA</li>
  <li>aAA</li>
  <li>AAa</li>
</ul>

＆＃13;

除了您在另一个答案中留下的评论之外，如果输入的字符串为"in"，您似乎不想匹配"index"或{{1} }，你可以使用单词边界（"intermittent"，双重转义，因为我们正在使用字符串连接，其中\\b字符是我们需要转义的转义字符）{ {1}}构造函数：

因为用户可以添加RegExp特殊字符，所以它变得有点乏味，但仍然是要求，以防止这些字符：

RegExp()

参考文献：

替换字符串char但保留案例类型

2 个答案: