获取HTML中元素的字符位置

Question

我有一个HTML字符串，想在以后用修改后的值替换锚点上每个href属性中的值。 为此，我想获取href属性开始的HTML字符串的索引（及其结尾的字符），或者锚点开始的HTML字符串的字符（及其结束的字符）在）。 例如，如果我有字符串：

<html><head></head><body><a href='http://example.com'/></body></html>

我想编写一个返回[34, 51] ， href第一个字符的索引和最后一个索引的方法。 据我所知，JQuery并没有给我索引来自选择器的响应的原始HTML字符串。 其他任何图书馆也没有给我提供确定此信息的方法。

如果现有的Javascript库（不构建新的解析器）无法做到这一点，是否有另一种语言的库（尤其是Ruby）来提供此功能？

Answer 1

这个例子对您有帮助吗？ 我根据另一个已回答的堆栈溢出问题将该答案汇总在一起。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @*MAKE SURE YOU HAVE A reference to jquery here-I have it in my bundle*@
    <script type="text/javascript">
        $(function () {
            $("#aBtn").click(function () {
                var elems = $("div[data-src]");
                var lastOne = elems[elems.length - 1]
                //replacing the last one with C, so C is shown twice-last two
                var grandchild = lastOne.children[0].children[0]
                grandchild.srcset = "https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+C"
            })
        })
    </script>
</head>
<body>
    <input type="button" id="aBtn" value="BtnTriggerInsteadOfOnLoad" />
    <div class="row">
        <div class="columns small-12">
            <div class="responsive-picture" data-src="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+A">
                <picture>
                    <!--[if IE 9]><video style="display: none;"><![endif]-->
                    <source media="(min-width: 64em)" srcset="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+A">
                    <source media="(min-width: 40em)" srcset="https://dummyimage.com/640x480/000/ffffff.jpg&text=meduim+A">
                    <source media="screen" srcset="https://dummyimage.com/320x240/000/ffffff.jpg&text=small+A">
                    <!--[if IE 9]></video><![endif]-->
                    <img alt="Placeholder Picture" src="transparent.gif">
                </picture>
            </div>
            <div class="responsive-picture" data-src="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+B">
                <picture>
                    <!--[if IE 9]><video style="display: none;"><![endif]-->
                    <source media="(min-width: 64em)" srcset="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+B">
                    <source media="(min-width: 40em)" srcset="https://dummyimage.com/640x480/000/ffffff.jpg&text=medium+B">
                    <source media="screen" srcset="https://dummyimage.com/320x240/000/ffffff.jpg&text=small+B">
                    <!--[if IE 9]></video><![endif]-->
                    <img alt="Placeholder Picture" src="transparent.gif">
                </picture>
            </div>
            <div class="responsive-picture" data-src="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+C">
                <picture>
                    <img alt="Placeholder Picture" src="transparent.gif" srcset="https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+C">
                </picture>
            </div>
            @*I PUT THE SRCE BACK ON THE DIV like it is suppose to be*@
            <div class="responsive-picture" data-src="https://dummyimage.com/1024x768/000/ff0000.jpg&text=large+D">
                <picture>
                    <img alt="Placeholder Picture" src="transparent.gif" srcset="https://dummyimage.com/1024x768/000/ff0000.jpg&text=large+D"> 
                </picture>
            </div>
        </div>
    </div>
</body>
</html>

Answer 2

我不确定为什么您需要搜索一串HTML代码，而不是直接使用DOM，但是下面的函数将完成您所需要的问题。 如果您的字符串中包含多个锚标记，则需要编写类似于以下内容的递归函数。

 var htmlString = "<html><head></head><body><a href='http://example.com'/></body></html>"; var getUrl = function (string) { var hrefStart = string.indexOf('href'); var httpStart = string.indexOf("'", hrefStart) + 1; var httpEnd = string.indexOf("'", httpStart) - 1; return [httpStart, httpEnd] }; console.log(getUrl(htmlString)); 

Answer 3

您也可以使用普通的javascript进行一些解析：

function getHrefsPositions(inputHtml){

    var currentIndex = inputHtml.indexOf("href");
    var results = [];

    while (currentIndex != -1){
        var closingQuote = inputHtml.indexOf("'", currentIndex + 6);

        results.push([currentIndex+5,closingQuote]);
        currentIndex = inputHtml.indexOf("'", closingQuote + 1);
    }

    return results;
}

 <html> <head> <script> function getHrefs(inputHtml){ var currentIndex = inputHtml.indexOf("href"); var results = []; while (currentIndex != -1){ var closingQuote = inputHtml.indexOf("'", currentIndex + 6); results.push([currentIndex+5,closingQuote]); currentIndex = inputHtml.indexOf("'", closingQuote + 1); } alert(results); return results; } getHrefs("<html><head></head><body><a href='http://example.com'/><a href='http://example.com'/></body></html>"); </script> </head> <body> </body> </html> 

Answer 4

为什么不只使用jQuery替换href值，然后将结果DOM转换为字符串？

$('a').attr('href', 'http://www.example.com');
var htmlString = $('html')[0].outerHTML;
console.log(htmlString);

Answer 5

以下正则表达式可能会有所帮助：

 var pattern = /href=(["'])(?:(?=(\\\\?))\\2.)*?\\1/igm var html = "<html><head></head><body><a href='http://example.com'/></body></html>"; while (match = pattern.exec(html)) { console.log(match.index + ' ' + pattern.lastIndex); } console.log(html[28 + 6]); console.log(html[53-1]); 

部分取自Java中的regex match（）的返回位置？ 现在用来自Java的regex match（）的Return位置的模式进行更新？ 由于您使用的是Ruby，因此还可以简单地使用ruby运行相同/相似的正则表达式，以将匹配的模式替换为所需的文本（我想像）。