使用正则表达式匹配和更改 html 元素的颜色答案

【问题标题】：match and change color of html elements using regex使用正则表达式匹配和更改 html 元素的颜色
【发布时间】：2014-08-16 11:36:16
【问题描述】：

这里我使用了一个可编辑的div，我将在其中写入任何html元素的名称，比如<div>、<body>这些字符串。然后将使用正则表达式模式匹配所选字符串，然后在跨度内再次写入并将字母颜色更改为红色。但它不起作用。我认为<> 标签不会让它发生。怎么解决？

<html>
<body>
<div id="mydiv"  contenteditable="true" style="width:100%;height:40px;border:1px solid black;overflow:hidden;"><html></div>
<input type="button" value="select" onClick="makeit();">
<span></span>
<script>
function makeit(){
 var m=document.getElementById('mydiv');
var text=m.innerHTML;
var p=document.getSelection();
var h=p.toString();
var regex=/<[a-z]+?>/;
var match=h.match(regex);
alert(match+ "matched");
var newelem=document.createElement('span');
newelem.setAttribute("style","color:red;position:relative;top:200px;left:0px]");

newelem.innerHTML=match;
document.body.appendChild(newelem);
}


</script>
</body>
</html>

【问题讨论】：

标签： javascript html regex dom

【解决方案1】：

这是因为 &lt; 和 &gt; 实际上是 contenteditable div 中的 &lt; 和 &gt;。

这样做：

var regex = /&lt;[a-z]+&gt;/g;

假设您想要所有匹配项，我添加了g，如果不是，您可以将其删除。此外，由于某种原因，您甚至没有查看 #mydiv 中的文本，而是查看了选定的文本（我猜可能恰好在 #mydiv 中）。我在下面的 jsfiddle 中更改了它。

JSFiddle

【讨论】：

我的错，太晚了，太累了。错过了关于选择的部分：document.getSelection()。 +1 是，然后