如何使用javascript或jQuery与数据值交换链接

时间:2014-10-15 15:02:21

标签: javascript jquery html indexof

我该如何交换:

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;
}

感谢您的帮助!

4 个答案:

答案 0 :(得分:0)

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

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=''的数字。没有比这更灵活。或者是吗? : - )

答案 1 :(得分:0)

您可以创建临时已断开连接的元素,并使用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/

注意:显示div仅用于测试目的,以显示它有效。

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));

答案 2 :(得分:0)

尝试

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>

答案 3 :(得分:-1)

这是一个使用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/