javascript - 尝试查找关键字并使用 JavaScript 将它们设为斜体

标签 javascript html css dom

我试图创建一些东西,它会在整个网页中搜索某些关键字,并使用纯 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>

应该产生结果: 鹦鹉螺号 是一艘由尼摩船长 经营的船。

我没有经验的逻辑说我应该(尝试)将整个文档解析为一个大字符串,然后使用正则表达式为关键字匹配该字符串,然后更改 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/

关于javascript - 尝试查找关键字并使用 JavaScript 将它们设为斜体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17246079/

相关文章:

css - 如何查找是否在 CSS 文件中错误地使用了两次相同的 css 类?

Javascript 重复字母 X 次

javascript - 未捕获的语法错误 : Unexpected token < on line 1

php - 我们如何使用单选按钮更改值

html - TCL HTML 文件查看器

javascript - jQuery 音量 slider

javascript - 使用 css() 获取样式属性值

javascript - Angular 时间选择器没有收到错误?

javascript - Node.js - 为什么我的一些回调没有异步执行?

html - 使用 "background-position"但我的背景图像正在消失