我正在寻找一种方法,只能在<br />
中的前4个或5个字符后插入<div>
。
实施例:
<div id="wine-name">
2008 Cabernet Sauvignon </div>
显示如下:
的 2008
赤霞珠(Cabernet Sauvignon)
不确定哪个更容易javascript或jQuery。该网站已经在使用jQuery。
有什么想法吗?
答案 0 :(得分:17)
如果您确定要始终在第四个字符后插入中断,则可以执行以下操作:
var html = $("#wine-name").html();
html = html.substring(0, 4) + "<br>" + html.substring(4);
$("#wine-name").html(html);
您可以在行动here中看到它。
如果你希望它在第一个单词(由空格分隔)后打破,你可以这样做:
var html = $("#wine-name").html().split(" ");
html = html[0] + "<br>" + html.slice(1).join(" ");
$("#wine-name").html(html);
您可以在行动here中看到这一点。
编辑您的评论:
$(".wine-name").each(function() {
var html = $(this).html().split(" ");
html = html[0] + "<br>" + html.slice(1).join(" ");
$(this).html(html);
});
见here。
答案 1 :(得分:0)
JavaScript中的代码如下所示:
var element = document.getElementById('wine-name');
element.innerHTML = element.innerHTML.substring(0, element.innerHTML.indexOf(' ')) + '<br />' + element.innerHTML.substring(element.innerHTML.indexOf(' '), element.innerHtml.length);
使用JQuery可能会更好。
答案 2 :(得分:0)
以上两个答案都没有考虑到用例可能包含这样的句子:在该句子中,应在所需的limit之前的最近空格处包含中断。 即上述方法将打破指定索引处的单词。但是在大多数情况下,这不是最合适的解决方案。这是我的看法。
function myFunction() {
var str = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book";
//var str = "LoremIpsumissimplydummytextoftheprintingandtypeset tingindustry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimensdfdfdfdfsdsds book";
var originalStr = str;
str = splitString(str);
document.getElementById("demo").innerHTML = str;
}
function splitString(str)
{
var originalStr = str;
var charLimit = 50;
var slicedStringList = [];
var flag = 1;
while(flag)
{
if(str.length <=50)
{
slicedStringList.push(str);
flag=0;
}
else
{
var tempChar = str[charLimit]
if(tempChar == ' ' ||tempChar == '\n' ||tempChar == '\r')
{
slicedStringList.push(str.substring(0,charLimit));
str = str.substring(charLimit+1,originalStr.length);
}
else
{
var tempStr = str.substring(0,charLimit);
var nearestSpace = tempStr.lastIndexOf(" ");
if(nearestSpace>-1)
{
slicedStringList.push(str.substring(0,nearestSpace));
str = str.substring(nearestSpace+1,originalStr.length);
}
else
{
slicedStringList.push(tempStr);
str = str.substring(charLimit+1,originalStr.length);
}
}
}
}
var newString = slicedStringList.join("<br>");
return newString;
}
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>
但是最好改为使用CSS。(更加细微)