任何已知单词的点击事件

Question

我有一段文字，例如

“这是一段糟糕的段落。好的是，这很糟糕。您知道它的不利之处吗？非常糟糕，为什么您不知道这一点。”

单击任何“不良”字词后如何触发事件。 而不用<span class="good-class">bad</span>或其他任何字词代替“坏”字？

Answer 1

仅选择器是不可能实现的。 由于选择器会选择整个元素。 但是，您可以在这里做些小技巧：

 var $el = $(".my-text"), html = $el.html(); // Replace with spans html = html.replace(/\\b(bad)\\b/ig,"<span class='bad-text'>$1</span>"); // Update content $el.html(html); // Assign click handler to those new elements $(".bad-text").on("click", function(e) { alert(this.textContent); }); 

 .bad-text{color:red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="my-text"> Bad! This is a bad paragraph. The good things is, this is bad. Very bad, why you do not know this. Simbad is a badass </p> 

首先用一些选择器替换“坏”一词，然后绑定该选择器。

Answer 2

我最初的想法是，您可以获取元素的innerHTML，然后在标有“ bad”的文本周围放置跨度，并向其添加eventListener。 当然，如果您可以访问html，则可以先在它们周围放跨度。

通过Id或TagName或其他方式选择DOM中的段落-如果没有原始html，很难告诉您哪个段落。

然后将“ bad”一词替换为“ bad”，然后访问所有这些跨度并向其添加事件侦听器。 在事件侦听器内部，仔细检查跨度内容是否为“错误”，然后执行所需的任何代码。

var el = document.getElementById("this-text");
var text = el.innerHTML;
var newText = text.replace(/\bbad\b/g, "<span>bad</span>");
el.innerHTML = newText;
var spans = el.getElementsByTagName('span')
for (let i=0; i<spans.length; i++) {
  spans[i].addEventListener('click', function() {
    if(this.innerHTML === 'bad') {
      alert('You clicked bad') // put whatever you want here
    }
}, false);
}

另外这里还有一个小提琴https://jsfiddle.net/BrettEast/attg0zqz/