如何使用javascript或jQuery交换具有数据值的链接

How to swap link with data value with javascript or jQuery

本文关键字：数据 链接 交换 何使用 javascript jQuery      更新时间：2023-09-26

如何交换：

var message = 'Another hurricane is coming <a contenteditable="false" data-number="23">here</a>. And check out pictures <a contenteditable="false" data-number="43">over there</a>.';

进入：

message = 'Another hurricane is coming @[23]. And check out pictures @[43].';

到目前为止我所拥有的：

var swap = function(message) {
  message.each(function() {
    var text = '@[' + $(this).data(number) + ']';
    message = $(this).replaceWith(text);
  });
  return message;
}

谢谢你的帮助！

这个小小的正则表达式可以帮你解决这个问题：

message = message.replace(/<a contenteditable="false" data-number="('d+)">.+?<'/a>/g, '@[$1]');

或者作为所需功能：

var swap = function (message) {
    return message.replace(/<a contenteditable="false" data-number="('d+)">.+?<'/a>/g, '@[$1]');
}

更灵活/动态的版本

message = message.replace(/<a.+?data-number=(?:"|')('d+)(?:"|').+?<'/a>/g, '@[$1]');

这将适用于<a>的任何数量的属性，甚至接受来自data-number=""和data-number=''的数字。没有比这更灵活的了。还是这样？：-）

尝试

var message = 'Another hurricane is coming <a contenteditable="false" data-number="23">here</a>. And check out pictures <a contenteditable="false" data-number="43">over there</a>.';
var swap = function(message) {
  var msg = $.parseHTML(message)
  , message = msg[0].textContent 
        + "@[" + msg[1].dataset.number + "]" 
        + msg[2].textContent 
        + "@[" + msg[3].dataset.number + "]";
  return message
};


var message = 'Another hurricane is coming <a contenteditable="false" data-number="23">here</a>. And check out pictures <a contenteditable="false" data-number="43">over there</a>.';
var swap = function(message) {
  var msg = $.parseHTML(message)
  , message = msg[0].textContent 
        + "@[" + msg[1].dataset.number + "]" 
        + msg[2].textContent 
        + "@[" + msg[3].dataset.number + "]";
  return message
}; var _message = swap(message); document.write(_message)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

您可以创建一个temp断开连接的元素，并使用jQuery选择器以结构化的方式操作HTML。这没有DOM开销，并且使得处理HTML非常方便。如果锚点上的属性与所示的示例不同，它也会起作用，因为它没有尝试精确匹配:

最终的较短功能版本现已登上榜首：

JSFiddle:http://jsfiddle.net/xbm2h6aL/5/

var swap = function (message) {
    var element = $('<div>').html(message);
    var $anchors = element.find('a').each(function () {
        $(this).replaceWith("@[" + $(this).data('number') + "]");
    });
    return element.html();
}

下面的旧版本：

JSFiddle:http://jsfiddle.net/xbm2h6aL/1/

注意：displaydiv纯粹用于测试目的，以表明它是有效的。

var message = 'Another hurricane is coming <a contenteditable="false" data-number="23">here</a>. And check out pictures <a contenteditable="false" data-number="43">here</a>.'
// create a disconnected div with the content
var element = $('<div>').html(message);
var $anchors = element.find('a');
$anchors.each(function(){
    var $a = $(this);
    var n = $a.data('number');
    $a.replaceWith("@[" + n + "]");
});
$('#result').append(element.contents());

代码可以缩短一两行，但我希望它具有指导性：）

作为一个函数（与原始函数一样）：http://jsfiddle.net/xbm2h6aL/3/

var message = 'Another hurricane is coming <a contenteditable="false" data-number="23">here</a>. And check out pictures <a contenteditable="false" data-number="43">here</a>.'
var swap = function (message) {
    // create a disconnected div with the content
    var element = $('<div>').html(message);
    var $anchors = element.find('a');
    $anchors.each(function () {
        var $a = $(this);
        var n = $a.data('number');
        $a.replaceWith("@[" + n + "]");
    });
    return element.html();
}
$('#result').append(swap(message));

下面是一个使用jQuery本机函数而不使用RegExp:的代码

var message = 'Another hurricane is coming <a data-number="23">here</a>. And check out pictures <a data-number="43">here</a>.';
var swap = function(msg){
    var html = jQuery.parseHTML(msg);
    var result = '';
    $.each(html, function(i, el){
        var element = $(el).filter('a');
        if(element.length > 0){
            var number = element.data('number');
            var text = '@[' + number + ']';
            result += text;
        } else {
            result += $(el).text();  
        }
    });
    return result;
}
swap(message);

您不应该依赖RegExp，因为您使用的HTML元素可能有几个属性。

这是一个JSFiddle：http://jsfiddle.net/g3k3ovd4/

相关文章：