Question

我正在开发chrome扩展程序，以获取一些乐趣，其中我在页面上搜索常量数组中的一些文本。为此，我在页面上获取了所有带有文本的元素，然后遍历了常量数组和节点数组（就性能而言，我对此感到有点不满意...）。找到匹配项后，我想添加一个在文本后执行操作的锚点。

例如，@implementation ViewController { NSArray *data; } - (void)viewDidLoad { [super viewDidLoad]; // You load your data from NSUserDefault here data = [self loadDataFromNSUserDefault]; } -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { NSString *cellIdentifier = @"defaultCell"; if (indexPath.section == 0) { cellIdentifier = @"customCell1"; } else if (indexPath.section == 1) { cellIdentifier = @"customCell2"; } UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier forIndexPath:indexPath]; // Access your view's children using their `tag` UILabel *title = [cell viewWithTag:100]; UIImageView *icon = [cell viewWithTag:101]; // Set content title.text = [[data objectAtIndex:indexPath.row] objectForKey:@"title"]; icon.image = [UIImage imageNamed:[[data objectAtIndex:indexPath.row] objectForKey:@"icon"]]; return cell; }是我要查找的单词：

"target"

我希望它最终像这样：

<p>You should really find the target better!</p>

我尝试了几种尝试使用<p>You should really find the target<a attr-name="target"> +</a> better!</p>的技术，尽管在这种情况下，由于元素是段落而不是目标文本，因此它不起作用，因此仅将锚点添加到该段的结尾。

我也尝试过仅将它们与innerHTML一起插入，尽管这似乎有些不稳定，尤其是在其他扩展程序正在执行DOM操作的情况下。

有什么想法吗？

Answer 1

function walkText(node) {
  if (node.nodeType == 3) {
    node.data = node.data.replace(/target/g, 'target<a href="#" attr-name="target"> +</a>');
  }
  if (node.nodeType == 1 && node.nodeName != "SCRIPT") {
    for (var i = 0; i < node.childNodes.length; i++) {
      walkText(node.childNodes[i]);
    }
  }
}
walkText(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
</body>

您可以使用replace()函数执行此操作。这是一个例子。

var str = "<p>You should really find the target better!</p>";
var res = str.replace("target", 'target<a href="#" attr-name="target"> +</a>');

这必须为您工作

Answer 2

我希望这是您想要的结果？

function walkText() {
  document.body.innerHTML = document.body.innerHTML.replace(/target/g, 'target <a attr-name="target"> +</a>');
}
walkText(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
</body>

Answer 3

对于锚点，您需要添加href must属性以像这样的链接

<p>You should really find the target<a href="#" attr-name="target"> +</a> better!</p>

我希望这就是您想要的。

谢谢

在HTML文本后添加锚点

3 个答案: