JavaScript 将字符串 href 转换为 onClicks答案

【问题标题】：JavaScript convert string hrefs into onClicksJavaScript 将字符串 href 转换为 onClicks
【发布时间】：2016-01-18 13:51:43
【问题描述】：

我有多个标准链接的字符串，例如

<a href="http://example.com">Name of Link</a>

我正试图把它们变成

<a onClick="myFunc('http://example.com','Name of Link')">Name of Link</a>

甚至只是：

<a onClick="myFunc('http://example.com')">Name of Link</a>

如果前者是不必要的困难，那就太好了。链接被动态插入到 DOM 中，因此事件处理程序不会这样做。

【问题讨论】：

标签： javascript regex onclick href

【解决方案1】：

您需要阻止默认操作并获取 href 的事件处理程序

var anchors = document.getElementsByTagName('a');

for (var i=anchors.length; i--;) {
    anchors[i].addEventListener('click', func, false);
}

function func(e) {
    e.preventDefault();
    var href = this.getAttribute('href'),
        text = this.innerText;
    myFunc(href, text);
}

FIDDLE

如果你必须使用字符串，你可以这样做

var str = '<a href="http://example1.com">Name of Link 1</a><br /><a href="http://example2.com">Name of Link 2</a><br /><a href="http://example3.com">Name of Link 3</a><br /><a href="http://example4.com">Name of Link 4</a>';

var parser  = new DOMParser();
var doc     = parser.parseFromString(str, "text/html");
var anchors = doc.getElementsByTagName('a');

for (var i=anchors.length; i--;) {
    var href = anchors[i].getAttribute('href'),
        text = anchors[i].innerText;
        
    anchors[i].setAttribute('onclick', "myFunc('"+href+"', '"+text+"')");
    anchors[i].removeAttribute('href');
}

str = doc.body.innerHTML;

document.body.innerHTML = str;

function myFunc(href, text) {
  alert(href + ' - ' + text);
}

【讨论】：

你说的dynamically posting是什么意思，它们是不是以后插入到DOM中的？
是的，我正在尝试在将链接插入 DOM 之前更改链接
然后解析HTML，don't work with string replacements in HTML
如果您可以控制字符串，那么为什么不按照您想要的方式创建呢？
@Rayon 它是从我无法控制的数据库中抓取的：s

【解决方案2】：

你可以这样做

HTML

<a href="http://example.com" onclick="myFunction(this.href,this.textContent)">
  My link
</a>

function myFunction(getAttr,text){
console.log(getAttr,text);

}

EXAMPLE

编辑

如果您想禁止href 操作，那么您必须使用

event.preventDefault();

更新的 JS

function myFunction(event,getAttr,text){
event.preventDefault();
console.log(getAttr,text);
}

UPDATED JSFIDDLE

【讨论】：

链接开始时没有点击，我正在尝试用它替换 href...
@MichaelTruong 很抱歉，我无法解决您的问题。您的意思是您不希望 href 执行它的操作吗？
第一行代码是如何开始的，第二行是我想把它变成的样子
这是否意味着在初始页面加载时您将拥有 href 属性，然后它将被 onclick 替换？
页面已经加载，href现在只是一个字符串，稍后会插入到DOM中

【解决方案3】：

将您的string 附加到一个临时的element 中并按照adeneo 的说明对其进行操作

试试这个：

var str = '<a href="http://example.com">Name of Link</a>';
var elem = document.createElement('div');
elem.innerHTML = str;
var targetEleme = elem.getElementsByTagName('a')[0];
targetEleme.addEventListener('click', function(e) {
  e.preventDefault();
  var href = this.getAttribute('href'),
    text = this.innerText;
  myFunc(href, text);
});
document.body.appendChild(targetEleme);

function myFunc(href, text) {
  alert('HREF: ' + href + '   TEXT: ' + text);
}

Fiddle here

【讨论】：

嗯，我试着玩了一下。我不知道，如果我正在循环访问数据库，事件监听器会消失吗？这难道不适用于带有其他文本和多个链接的字符串吗？