我该如何交换:
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;
}
感谢您的帮助!
答案 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/