JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<div id="boxed_contents"><span>hello</span>  <span>world</span>  <span data-boxme>look</span>  <span data-boxme>at</span>  <span data-boxme>me</span>  <span>not me</span>  <span data-boxme>but</span>
	<span data-boxme>dont</span>  <span data-boxme>forget</span>  <span>or</span>  <span>ignore</span>  <span data-boxme>me</span>

</div>

JavaScript

var borderProps = '2px solid #f00',
    borderRadius = '5px',
    boxMeAttr = 'data-boxme';
var spans = document.querySelectorAll('span'),
    boxMeArrays = [],
    dummyArray = null,
    iterator = 0;
var currSpan = null,
    prevSpan = null;
var i, length = spans.length,
    adjacentSpans = 0;
for (i = 0; i < length; i += 1) {
    prevSpan = currSpan;
    currSpan = spans[i];
    if (currSpan.hasAttribute(boxMeAttr)) {
        if (prevSpan !== null && prevSpan.hasAttribute(boxMeAttr)) {
            dummyArray[dummyArray.length] = currSpan;
        } else {
            dummyArray = [currSpan];
            boxMeArrays[iterator] = dummyArray;
            iterator += 1;
        }
    }
}
length = boxMeArrays.length;
for (i = 0; i < length; i += 1) {
    adjacentSpans = boxMeArrays[i].length;
    for (var j = 0; j < adjacentSpans; j += 1) {
        currSpan = boxMeArrays[i][j];
        if (adjacentSpans > 1) {
            if (j === 0) {
                currSpan.innerText += ' ';
                currSpan.style.borderLeft = currSpan.style.borderTop = currSpan.style.borderBottom = borderProps;
                currSpan.style.borderTopLeftRadius = currSpan.style.borderBottomLeftRadius = borderRadius;
            } else if (j === adjacentSpans - 1) {
                currSpan.style.borderTop = currSpan.style.borderBottom = currSpan.style.borderRight = borderProps;
                currSpan.style.borderTopRightRadius = currSpan.style.borderBottomRightRadius = borderRadius;
            } else {
                currSpan.innerText += ' ';
                currSpan.style.borderTop = currSpan.style.borderBottom = borderProps;
            }
        } else {
            currSpan.style.border = borderProps;
            currSpan.style.borderRadius = borderRadius;
        }
    }
}