JSFiddle - React, Tailwind, and code Playground

by isochronous

HTML

<div>
    <p id="para">
        <a href="#one">This is some text</a> |
        <a href="#two">This is some other text</a> |
        <a href="#what">How'd I get here?</a> |
        <a href="#three">This is the last one</a> |
        <a href="#four">I lied, this is now the last one</a>
    </p>
</div>

CSS

* { box-sizing: border-box; }
body { background-color: #eee; font: 100%/1.5 sans-serif; }
div {background-color: #fff; margin: 2em; padding: 2em; }

JavaScript

var $para = $("#para");
var $links = $para.find("a[href!='#one'][href!='#three']");

$para.empty();

var lastIndex = $links.length-1;
$links.each(function(i, el){
    $para.append(el);
    if (i < lastIndex) { $para.append(" | "); }
});