JavaScript找出数字开始的位置并添加标记

I am working with 3D carts, they do not give me any access to PHP only JavaScript HTML and CSS. I want to get the dimensions of my products on the category page. but they need to be on a new line so that customers can clearly see it. If i add a <br /> into the title it messes up a lot of things.

If this was the name of the product I want to find the first number "16" and add a <br /> in front of it using JavaScript.

DELUXE TOTE JR. 16" X 12" X 6"

To get the result of

DELUXE TOTE JR. <br />
16" X 12" X 6"

Is this possible or a lost cause?

You could use Javascript's replace method to accomplish what you want, but like others mentioned, it's going to be tricky if different pieces of that string are wrapped in other elements like spans or divs, or if you don't have a clear selector around the whole string to start with. If you could post the actual HTML that is output, we could probably get this closer.

var title = document.getElementById('title')
var titleText = title.innerHTML;
var res = titleText.replace(/([0-9]{1,2}")/, "<br/>$&");
title.innerHTML = res;

<span id='title'>DELUXE TOTE JR. 16" X 12" X 6"</span>

</div>

In order for me to get the products on the category page to have the dimensions down a line I had to use the class instead of the id since html doesn't let multiple of the same ids.

JavaScipt

var title = document.getElementsByClassName("title");

for (var i = 0; i < 100; i++) {
    var titleText = title[i].innerHTML;
    var res = titleText.replace(/\d+(\.\d{1,2})?/, "<br/>$&");
    title[i].innerHTML = res;
}

HTML

<span class="title">[name]</span>

This let me add a <br/> before the first number witch is the first dimension.