使用 javascript/lodash 从输入字符串中解析 html 内容

Posted 2023-03-05

【中文标题】使用 javascript/lodash 从输入字符串中解析 html 内容

【英文标题】：Parse html content from an input string using javascript/lodash

【发布时间】：2018-03-01 23:25:55

【问题描述】：

我有一个这样的字符串：

var inputString = "some sample string with <span data-id='24' data-name='cat'">cat</span> and <span data-id='25' data-name='dog'">dog</span>"

我要做的是将跨度中的数据提取到 json 数组中：

var json = [
    
        id: '24',
        name: 'cat'
    ,
    
        id:'25',
        name: 'dog'
    
];

然后从字符串中去掉跨度：

var outputString = "some sample string with cat and dog";

知道如何使用纯 javascript 或 lodash 做到这一点吗？是否有一个函数可以为我提取所有跨度段，还是我需要逐步完成，从第一个元素开始查找跨度元素的索引？任何帮助将不胜感激。

【问题讨论】：

将字符串赋值给文档片段的innerhtml，然后使用DOM函数提取元素。

【参考方案1】：

您将字符串解析为 HTML，提取数据属性，然后使用 textContent 获取文本

var inputString = "some sample string with <span data-id='24' data-name='cat'>cat</span> and <span data-id='25' data-name='dog'>dog</span>";

var parser = new DOMParser();
var doc    = parser.parseFromString(inputString, "text/html");
var json   = [].slice.call(doc.querySelectorAll('span')).map(function(span) 
    return id : span.dataset.id, name : span.dataset.name;
);

var outputString = doc.body.textContent;

console.log(json);
console.log('------');
console.log(outputString);

.as-console-wrapper max-height: 100%!important; top: 0;

【讨论】：

这太棒了！你知道是否有一种简单的方法可以找到单词的开始和结束索引（例如 dog 或 cat）？狗出现的位置和猫出现在字符串中的位置（忽略跨度）。

当然，当你有字符串时，你可以使用indexOf 来获取字符串中单词的索引

嗯，好吧...我只是想知道如何仅获取跨度中单词的索引...如果字符串中的其他地方有另一只狗怎么办...

好吧，indexOf 仅获取 first 的索引，但您也可以设置起点，因此如果您开始就可以找到任意数量的匹配项通过找到一个，然后说“cat”的起始索引是 20，您可以执行 str.indexOf("cat", 21) 从字符串中的字符 21 等开始查找以找到第二个的索引，依此类推。

嗯，好的！最后一个问题——如果第二只猫是跨度中的那只怎么办？有没有办法让我知道是找第一只猫还是第二只？

【参考方案2】：

另一个答案很好，肯定回答了这个问题，但我想提供一个使用正则表达式的替代答案。我不是最擅长正则表达式，但这就是我想出的......

const input = "some sample string with <span data-id='24' data-name='cat'>cat</span> and <span data-id='25' data-name='dog'>dog</span>";

const dataReg = new RegExp(/data-(\w+)=[\'|\"](\w+)[\'|\"] data-(\w+)=[\'|\"](\w+)[\'+\"]/g);

const json = [];

// get the matches and add them to the json array
while ((g = dataReg.exec(input)) !== null) 
  // we only care about matches after idx 1
  let m = ;
  m[g[1]] = g[2];
  m[g[3]] = g[4];
  json.push(m);


console.log(json); // [id: "24", name: "cat", id: "25", name: "dog"]

// strip the html
let safeStr = input.replace(/<(?:.|\n)*?>/gm, '');

console.log(safeStr);  // some sample string with cat and dog"

您可以在这里预览：https://jsbin.com/quyufoc/edit?js,console

【讨论】：

这也很棒。使用这种方法，如果我还想在输出字符串中找到每个单词（狗和猫）的开始和结束索引，我该怎么做呢？

我知道我可以使用 indexOf 函数，但万一句子中还有其他狗和猫没有包裹在 span 中，它可能会让我失望。

你想要它们在 safeStr 中的索引吗？并且您的第二条评论肯定指出了一个潜在的问题...我想您想要出现在 标记中的狗和猫的索引，但包括在出现之前删除的字符的偏移量？

是的，我只需要 safeStr 中 dog 和 cat 的索引。所以偏移量不应该包括跨度标签的东西。