尝试使用JavaScript查找关键字并将其斜体

Trying to find keywords and italicize them using JavaScript

本文关键字：斜体 关键字 查找 JavaScript      更新时间：2023-09-26

我试图创建一些东西，将搜索整个网页的某些关键字，并使用纯JavaScript斜体他们。我最近甚至没有尝试过任何与JavaScript相关的事情，所以我不知道为什么这不起作用。我试过谷歌搜索，但没有用处，特别是我的问题(我发现的一切都是试图改变一个元素的class，而不是只是基本的css属性)。我真正想知道的是为什么不起作用。以下是目前为止的内容:

<html>
<head>
    <script>
        var str = document.getElementsByTagName("*").innerHTML;
        var n = str.match(/(Nautilus|Captain Nemo)/i);
        n.style.fontStyle = "italic";
    </script>
</head>
<body>
The Nautilus was a ship run by Captain Nemo.
</body>
</html>

应该产生如下结果:鹦鹉螺号是一艘由尼摩船长驾驶的船。

我没有经验的逻辑说我应该(尝试)将整个文档解析为一个大字符串，然后使用regex为关键字匹配该字符串，然后更改style.fontStyle。

现在，就像我说的，我甚至没有碰JavaScript甚至jQuery一段时间了，因为现在很忙，所以我可能会离开，但任何帮助将是非常感激的!

这里n只是一个字符串。它不是页面上的节点。并且只有页面上的节点可以拥有与其父节点不同的样式。你不能简单地告诉一个字符串是斜体。它只是一个字符串，根本没有关联的固有表示信息。

所以要做到这一点，你必须:

  1. 查找文本
  2. 在<em>元素中包裹文本，对于每个匹配
  3. 将结果HTML字符串插入文档

或者在JS中:

// get all body content as a string
var str = document.body.innerHTML;
// find all magic words and wrap them in a <em> tag
var result = str.replace(/(Nautilus|Captain Nemo)/ig, "<em>$1</em>");
// set all body content HTML with new processed content
document.body.innerHTML = result;

看它在这里工作:http://jsfiddle.net/2px7m/

var str = document.getElementsByTagName('body');
//Use g so it will be global  
var regex= /(Nautilus|Captain Nemo)/ig;
str[0].innerHTML = str[0].innerHTML.replace(regex, "<i>$1</i>");
相关文章：