gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 10:14:52 27 4
gpt4 key购买 nike

这里我使用了一个可编辑的 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>

最佳答案

这是因为 <>实际上是&lt;&gt;在 contenteditable div 中。

这样做:

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

我添加了 g假设您想要所有匹配项,如果不需要,您可以将其删除。此外,出于某种原因,您甚至没有查看 #mydiv 中的文本。 ,您正在查看选定的文本(我想这可能恰好在 #mydiv 中)。我在下面的 jsfiddle 中更改了它。

JSFiddle

关于javascript - 使用正则表达式匹配和更改 html 元素的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24416582/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com