Fatal编程技术网
  • jquery/
  • Jquery 获取HTML中元素的字符位置

Jquery 获取HTML中元素的字符位置

jquery html ruby parsing url

Jquery 获取HTML中元素的字符位置,jquery,html,ruby,parsing,url,Jquery,Html,Ruby,Parsing,Url,我有一个HTML字符串，希望稍后用修改后的值替换锚点上每个href属性中的值。为此，我想将索引抓取到href属性开始的HTML字符串中（以及它结束的字符），或者锚定开始的HTML字符串中的字符（以及它结束的字符）。例如，如果我有字符串： <html><head></head><body><a href='http://example.com'/></body></html> 我想编写一个方法，返回[34,5

我有一个HTML字符串，希望稍后用修改后的值替换锚点上每个
href
属性中的值。为此，我想将索引抓取到
href
属性开始的HTML字符串中（以及它结束的字符），或者锚定开始的HTML字符串中的字符（以及它结束的字符）。例如，如果我有字符串：

<html><head></head><body><a href='http://example.com'/></body></html>
我想编写一个方法，返回
[34,51]
，即
href
中第一个字符的索引和最后一个字符的索引。据我所知，JQuery并没有给我从选择器返回的响应的原始HTML字符串的索引。其他任何图书馆也没有给我一个确定这些信息的方法

如果现有的Javascript库（不构建新的解析器）无法做到这一点，那么是否有另一种语言的库提供这一点（特别是Ruby）？

这个示例对您有帮助吗？我根据我回答的另一个堆栈溢出问题得出了这个答案

<!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>


引导示例
@*确保您在这里有对jquery的引用—我的包中有它*@
$（函数（）{
$（“#aBtn”）。单击（函数（）{
变量元素=$（“div[data src]”）；
var lastOne=elems[elems.length-1]
//将最后一个替换为C，因此最后两个显示两次C
var green=lastOne.children[0]。children[0]
孙子.srcset=”https://dummyimage.com/1024x768/000/ffffff.jpg&text=large+C“
})
})
@*我把SRCE放回DIV上，就像它被认为的那样*@
我不确定您为什么需要搜索HTML代码字符串，而不是直接使用DOM，但下面的函数将完成您需要的关于问题的功能。如果您有一个包含多个锚定标记的字符串，那么您需要编写一个类似于下面的递归函数

var htmlString=“”；
var getUrl=函数（字符串）{
var hrefStart=string.indexOf（'href'）；
var httpStart=string.indexOf（“”，hrefStart）+1；
var httpEnd=string.indexOf（“”，httpStart）-1；
返回[httpStart，httpEnd]
};

log（getUrl（htmlString））您还可以使用纯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;
}





函数getHrefs（inputHtml）{
var currentIndex=inputtml.indexOf（“href”）；
var结果=[]；
while（currentIndex！=-1）{
var closingQuote=inputtml.indexOf（“'”，currentIndex+6）；
结果：推送（[currentIndex+5，closingQuote]）；
currentIndex=inputtml.indexOf（“'”，closingQuote+1）；
}
警报（结果）；
返回结果；
}
getHrefs（“”）；

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


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



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



var模式=/href=（[“']）（？：（？=（\\？）\2.）*？\1/igm
var html=“”；
while（match=pattern.exec（html））{
console.log（match.index+''+pattern.lastIndex）；
}
log（html[28+6]）；

console.log（html[53-1]）；
因为实际的修改不是在Javascript中发生的，而是在Ruby中发生的。看起来没有一个好的Ruby客户端不会对生成的html字符串进行修改（例如，去除空白）。显然，这会捕获任何出现的
href
，这是不可取的。